<template>
	<view>
		<view class="boxContrainer">
			<view class="contentBox">
				<view class="textItem">
					<text>加油车辆</text>
					<text style="color: #333;">{{detailInfo.carNo|filterNull}}</text>
				</view>
				<view class="textItem" >
					<text>加油人</text>
					<text style="color: #333;">{{detailInfo.oiler|filterNull}}</text>
				</view>
				<view class="textItem">
					<text>加油日期</text>
					<text style="color: #333;">{{detailInfo.refuelingDate|filterNull}}</text>
				</view>
				<view class="textItem">
					<text>使用油卡</text>
					<text style="color: #333;">{{detailInfo.cardNo| filterNull}}</text>
				</view>
				<view class="textItem">
					<text>加油金额</text>
					<text style="color: #333;">¥{{detailInfo.refuelingAmount| filterNull}}</text>
				</view>
				<view class="textItem">
					<text>加油前公里数</text>
					<text style="color: #333;">{{detailInfo.kilometers|filterNull}}</text>
				</view>
				<view class="textItem">
					<text>加油前油量</text>
					<text style="color: #333;">{{detailInfo.oilVolume|filterNull}}</text>
				</view>
				<view class="textItem">
					<text>备注</text>
					<text style="color: #333;">{{detailInfo.remark|filterNull}}</text>
				</view>
				<view v-if="url1.length>0" class="textItem" style="flex-direction: column;align-items: flex-start;">
					<text style="margin-bottom: 16rpx;">加油前油表图片</text>
					<u-album :urls="url1" singleSize="100" multipleSize="100">
					</u-album>
				</view>
				<view v-if="url2.length>0" class="textItem" style="flex-direction: column;align-items: flex-start;">
					<text style="margin-bottom: 16rpx;">加油后油表图片</text>
					<u-album :urls="url2" singleSize="100" multipleSize="100">
					</u-album>
				</view>
				<view v-if="url3.length>0" class="textItem" style="flex-direction: column;align-items: flex-start;">
					<text style="margin-bottom: 16rpx;">加油小票</text>
					<u-album :urls="url3" singleSize="100" multipleSize="100">
					</u-album>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import * as refuelApi from '@/api/refuel-api.js';
	import settings from '@/settings.js';
	export default {
		data() {
			return {
				url1: [],
				url2:[],
				url3:[],
				detailInfo: {},
				id : ''
			}
		},
		onLoad(op) {
            this.id = op.id;
			this.getRefuelDetail();
		},
		methods: {
            getRefuelDetail() {
            	refuelApi.refuelDetail(this.id).then(res => {
            		this.detailInfo = res.data;
            		if(!uni.$u.test.isEmpty(this.detailInfo.photoOfBefore)) {
            			this.url1 = [settings.baseImageUrl + this.detailInfo.photoOfBefore];
            		}
					if(!uni.$u.test.isEmpty(this.detailInfo.photoOfAfter)) {
						this.url2 = [settings.baseImageUrl + this.detailInfo.photoOfAfter];
					}
					if(!uni.$u.test.isEmpty(this.detailInfo.refuelingTicket)) {
						this.url3 = [settings.baseImageUrl + this.detailInfo.refuelingTicket];
					}
            	});
            },
		}
	}
</script>

<style lang="scss" scoped>

</style>
